<template>
	<div class="creditAdd">
		<div class="title">购车人</div>
		<div>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					姓名
				</el-col>
				<el-col :span="12">
					<el-input class="info-input" v-model="carBuy.name" :disabled="disabled"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					身份证号码
				</el-col>
				<el-col :span="12">
					<el-input class="info-input" v-model="carBuy.code" :disabled="disabled"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					贷款银行
				</el-col>
				<el-col :span="12">
					<el-autocomplete :disabled="disabled" class="inline-input info-input" v-model="carBuy.bank" :fetch-suggestions="querySearch" placeholder="请输入内容"></el-autocomplete>
				</el-col>
			</el-row>
			<div class="info-row submitInfoTitle" v-show="!($refs.carBuy && $refs.carBuy.fileList.length<=0 && $refs.carBuy.isEdit==false)">上传资料</div>
			<el-row class="info-row credit-imgs">
				<upload class="upload" ref="carBuy"></upload>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					婚姻状态
				</el-col>
				<el-col :span="12">
					<el-select class="info-select" :disabled="disabled" v-model="carBuy.marry" placeholder="请选择">
						<el-option v-for="item in $store.state.marryStatus" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
		</div>
		<div class="title" v-show="carBuy.marry==1 || carBuy.marry==0">共同购车人</div>
		<div v-show="(carBuy.marry==1 || carBuy.marry==0) && marryChange==false">
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					姓名
				</el-col>
				<el-col :span="12">
					<el-input class="info-input" v-model="carBuyCommon.name" :disabled="disabled"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					身份证号码
				</el-col>
				<el-col :span="12">
					<el-input class="info-input" v-model="carBuyCommon.code" :disabled="disabled"></el-input>
				</el-col>
			</el-row>
			<div class="info-row submitInfoTitle" v-show="!($refs.carBuyCommon && $refs.carBuyCommon.fileList.length<=0 && $refs.carBuyCommon.isEdit==false)">上传资料</div>
			<el-row class="info-row credit-imgs">
				<upload class="upload" ref="carBuyCommon"></upload>
			</el-row>
		</div>
		<!-- <div class="title" v-show="assurePersons.length > 0">担保人</div> -->
		<div v-for="(vm , index) in assurePersons">
			<el-row v-show="isAssurePersonAdd==true && isEdit == true && index>=isAssurePersonOld">
				<el-col :span="2">
					<div class="title">担保人{{index+1}}</div>
				</el-col>
				<el-col :span="3" :offset="12" class="subTitle">
					<el-button @click="deleAssurePersons(index)" class="custom-button-minor">删除</el-button>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="(isAssurePersonAdd==false && isEdit == true) || (isAssurePersonAdd==true && isEdit == true && index<isAssurePersonOld)">
				<el-col :span="3" class="subTitle">
					姓名
				</el-col>
				<el-col :span="12">
					<el-input class="info-input" v-model="vm.name" :disabled="disabled"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="(isAssurePersonAdd==false && isEdit == true) || (isAssurePersonAdd==true && isEdit == true && index<isAssurePersonOld)">
				<el-col :span="3" class="subTitle">
					身份证号码
				</el-col>
				<el-col :span="12">
					<el-input class="info-input" v-model="vm.code" :disabled="disabled"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isAssurePersonAdd==true && isEdit == true && index>=isAssurePersonOld">
				<el-col :span="3" class="subTitle">
					姓名
				</el-col>
				<el-col :span="12">
					<el-input class="info-input" v-model="vm.name"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isAssurePersonAdd==true && isEdit == true && index>=isAssurePersonOld">
				<el-col :span="3" class="subTitle">
					身份证号码
				</el-col>
				<el-col :span="12">
					<el-input class="info-input" v-model="vm.code"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row credit-imgs" v-show="isAssurePersonAdd==true && isEdit == true && index>=isAssurePersonOld">
				<el-col :span="5" class="credit-img-each">
					<upload v-show="isEdit" class="upload" :ref="'upload1'+index"></upload> 身份证正面
				</el-col>
				<el-col :span="5" class="credit-img-each">
					<upload v-show="isEdit" class="upload" :ref="'upload2'+index"></upload>
					身份证背面
				</el-col>
				<el-col :span="5" class="credit-img-each">
					<upload v-show="isEdit" class="upload" :ref="'upload3'+index"></upload> 授权书
				</el-col>
				<el-col :span="5" class="credit-img-each">
					<upload v-show="isEdit" class="upload" :ref="'upload4'+index"></upload> 授权书面签
				</el-col>
			</el-row>
			<el-row class="info-row credit-imgs" v-show="index < isAssurePersonOld">
				<upload class="upload" :ref="'assurePersons'+index"></upload>
			</el-row>
		</div>
		<el-button v-show="isEdit == true" class="custom-button-minor credit-button-assure" icon="plus" @click="assurePersonAdd">新增担保人</el-button>
	</div>
</template>
<script>
export default {
	name: 'creditAdd',
	components: {
		upload: require('../../components/other/upload'),
	},
	data() {
		return {
			isEdit: false,
			disabled: true,
			marryChange: false,
			isChanged: false,
			isAssurePersonAdd: false,
			isAssurePersonOld: 0,
			carBuy: {
				shrink: false,
				shrinkText: '',
				name: '',
				code: '',
				marry: '',
				bank: '',
				result: '',
				annexList: []
			},
			carBuyCommon: {
				shrink: false,
				shrinkText: '展开全部',
				name: '',
				code: '',
				result: '',
				annexBatchNo: '',
			},
			assurePersons: [],
			orderNo: '',
			group: 3,
			type: 0,
			isOne: true
		}
	},
	methods: {
		querySearch(queryString, cb) {
			// 调用 callback 返回建议列表的数据
			cb(this.$store.state.bank);
		},
		deleAssurePersons(_index) {
			this.assurePersons.splice(_index, 1);
		},
		assurePersonAdd() {
			// 新增担保人
			// if (this.assurePersons && this.assurePersons.length > 0) {
			//     for (var index = 0; index < this.assurePersons.length; index++) {
			//         for (var i = 1; i < 5; i++) {
			//             this.$refs['upload' + i + index][0].isEdit = false;
			//         }
			//     }
			// }

			this.assurePersons.push({
				shrink: false,
				shrinkText: '展开全部',
				name: '',
				code: '',
				result: '',
				img1: '',
				annexBatchNo: ''
			});
			this.$http.post('/annex/').then((data) => {
				if (data.data.success && this.assurePersons && this.assurePersons.length > 0) {
					for (var index = 0; index < this.assurePersons.length; index++) {
						let vm = this.assurePersons[index];
						vm.annexBatchNo = data.data.data.annexBatchNo;
						for (var i = 1; i < 5; i++) {
							this.$refs['upload' + i + index][0].isOne = this.isOne;
							this.$refs['upload' + i + index][0].id = this.assurePersons[index].annexBatchNo;
							this.$refs['upload' + i + index][0].group = this.group;
							this.$refs['upload' + i + index][0].type = this.type;
							this.$refs['upload' + i + index][0].isSecondDialog = true;
							switch (i) {
								case 1:
									this.$refs['upload' + i + index][0].fileName = '身份证正面';
									break;
								case 2:
									this.$refs['upload' + i + index][0].fileName = '身份证背面';
									break;
								case 3:
									this.$refs['upload' + i + index][0].fileName = '授权书';
									break;
								case 4:
									this.$refs['upload' + i + index][0].fileName = '授权书面签';
									break;
								default:
									break;
							}
						}
					}
				}
			}).catch((error) => {

			});
			this.isAssurePersonAdd = true;
		},
		getCreditInfo(_id, _cb) {
			this.$http.get('/credit/look/' + _id).then((data) => {
				if (data.data.success) {
					let datas = data.data.data;
					this.info = {
						inStationPerson: datas.buyer.handleStaffName, //驻站员
						enterTime: datas.buyer.recordTime, //录入时间
					};
					this.carBuy = {
						shrink: false,
						shrinkText: '展开全部',
						name: datas.buyer.customerName,
						code: datas.buyer.idCard,
						marryName: datas.buyer.bemarriedName,
						marry: datas.buyer.bemarried,
						bank: datas.buyer.bankName,
						bankId: datas.buyer.bankId,
						result: datas.buyer.creditResult,
						annexList: datas.buyer.annexList,
						creditQueryApplyId: datas.buyer.creditQueryApplyId,
						customerId: datas.buyer.customerId,
						customerName: datas.buyer.customerName,
						customerType: datas.buyer.customerType,
					};
					this.$nextTick(() => {
						if (datas.buyer.annexBatchNo) {
							this.$refs.carBuy.id = datas.buyer.annexBatchNo;
							this.$refs.carBuy.group = 1;
							this.$refs.carBuy.type = 0;
							this.$refs.carBuy.isSecondDialog = true;
							this.$refs.carBuy.getFileList(false);
						} else {
							this.$refs.carBuy.isEdit = false;
						}
					});
					this.carBuyCommon.annexBatchNo = datas.buyer.annexBatchNo;
					if (datas.commonBuyer) {
						this.carBuyCommon = {
							shrink: false,
							shrinkText: '展开全部',
							name: datas.commonBuyer.customerName,
							code: datas.commonBuyer.idCard,
							result: datas.commonBuyer.creditResult,
							annexList: datas.commonBuyer.annexList,
							annexBatchNo: datas.buyer.annexBatchNo,
							customerId: datas.commonBuyer.customerId,
							creditQueryApplyId: datas.commonBuyer.creditQueryApplyId,
							bankName: datas.buyer.bankName,
							bankId: datas.buyer.bankId,
							bemarried: datas.commonBuyer.bemarried,
						};
						if (_cb && _cb.carBuyCommon) {
							_cb.carBuyCommon();
						}
						this.$nextTick(() => {
							this.marryChange = false;
							if (datas.commonBuyer.annexBatchNo) {
								this.$refs.carBuyCommon.id = datas.commonBuyer.annexBatchNo;
								this.$refs.carBuyCommon.group = 2;
								this.$refs.carBuyCommon.type = 0;
								this.$refs.carBuyCommon.isSecondDialog = true;
								this.$refs.carBuyCommon.getFileList(false);
							} else {
								this.$refs.carBuyCommon.isEdit = false;
							}
						});
					} else {
						if (_cb && _cb.carBuyCommonNone) {
							_cb.carBuyCommonNone();
						}
					}
					if (datas.sponsor && datas.sponsor.length > 0) {
						this.isAssurePersonOld = datas.sponsor.length;
						if (_cb && _cb.assurePerson) {
							_cb.assurePerson();
						}
						this.isAssurePersonOld = datas.sponsor.length;
						this.assurePersons = [];
						for (let index = 0; index < datas.sponsor.length; index++) {
							let vm = datas.sponsor[index];
							this.assurePersons.push({
								shrink: false,
								shrinkText: '展开全部',
								name: vm.customerName,
								code: vm.idCard,
								result: vm.creditResult,
								annexList: vm.annexList,
								annexBatchNo: vm.annexBatchNo
							});
							this.$nextTick(() => {
								console.log(this.$refs);
								if (vm.annexBatchNo) {
									this.$refs['assurePersons' + index][0].id = vm.annexBatchNo;
									this.$refs['assurePersons' + index][0].group = 3;
									this.$refs['assurePersons' + index][0].type = 0;
									this.$refs['assurePersons' + index][0].isSecondDialog = true;
									this.$refs['assurePersons' + index][0].getFileList(false);
									this.$refs['assurePersons' + index][0].isSecondDialog = true;
								} else {
									his.$refs['assurePersons' + index][0].isEdit = false;
								}
								for (var i = 1; i < 5; i++) {
									this.$refs['upload' + i + index][0].isOne = this.isOne;
									this.$refs['upload' + i + index][0].id = this.assurePersons[index].annexBatchNo;
									this.$refs['upload' + i + index][0].group = 3;
									this.$refs['upload' + i + index][0].type = 0;
									this.$refs['upload' + i + index][0].isSecondDialog = true;
									switch (i) {
										case 1:
											this.$refs['upload' + i + index][0].fileName = '身份证正面';
											break;
										case 2:
											this.$refs['upload' + i + index][0].fileName = '身份证背面';
											break;
										case 3:
											this.$refs['upload' + i + index][0].fileName = '授权书';
											break;
										case 4:
											this.$refs['upload' + i + index][0].fileName = '授权书面签';
											break;
										default:
											break;
									}
								}
							});

						}
					} else {
						if (_cb && _cb.assurePersonNone) {
							_cb.assurePersonNone();
						}
					}
				} else {
					if (_cb.assurePersonNone) {
						_cb.assurePersonNone();
					}
					if (_cb.carBuyCommonNone) {
						_cb.carBuyCommonNone();
					}
				}
			}).catch((error) => {

			});
		},
		creditInfoEnter(_id, _isMust, _orderStatus) {
			let sponsor = [];
			$.each(this.assurePersons, (i, el) => {
				sponsor.push({
					customerName: el.name,
					idCard: el.code,
					orderNo: _id,
					annexBatchNo: el.annexBatchNo,
					creditQueryApplyId: '',
					customerId: el.customerId,
					customerName: el.name,
					bankName: this.carBuy.bank,
					bankId: this.$libs.jsonGetId(this.$store.state.bank, this.carBuy.bank),
					bemarried: '',
					customerType: '3',
				});
			});
			let param = {
				buyer: {
					bemarried: this.carBuy.marry,
					annexBatchNo: this.carBuyCommon.annexBatchNo,
					bankName: this.carBuy.bank,
					orderNo: _id,
					bankId: this.$libs.jsonGetId(this.$store.state.bank, this.carBuy.bank),
					creditQueryApplyId: this.carBuy.creditQueryApplyId,
					customerId: this.carBuy.customerId,
					customerName: this.carBuy.name,
					idCard: this.carBuy.code,
					customerType: this.carBuy.customerType,
				},
				commonBuyer: (this.carBuy.marry == 2 || this.carBuy.marry == 3 || this.carBuy.marry == 4) ? null : {
					orderNo: _id,
					customerName: this.carBuyCommon.name,
					annexBatchNo: this.carBuyCommon.annexBatchNo,
					idCard: this.carBuyCommon.code,
					customerId: this.carBuyCommon.customerId ? this.carBuyCommon.customerId : this.carBuy.customerId,
					creditQueryApplyId: this.carBuyCommon.creditQueryApplyId,
					bankName: this.carBuy.bankName ? this.carBuy.bankName : this.carBuy.bank,
					bankId: this.$libs.jsonGetId(this.$store.state.bank, this.carBuy.bank),
					bemarried: this.carBuyCommon.bemarried ? this.carBuyCommon.bemarried : '',
					customerType: '2',
				},
				sponsor: sponsor.length > 0 ? sponsor : null
			};

			console.log(param);
			if (_isMust && !this.$libs.mustWrite(param)) {
				this.$store.commit('isAllMustFalse');
				return;
			} else if (_isMust) {
				// this.$store.commit('isAllMustTrue');
			}
			this.$http.post('/credit/updateCredit', param).then((data) => {
				if (data.data.success) {
					this.id = _id;
					this.orderStatus = _orderStatus;
					this.$libs.successAlert(this, {
						title: '征信补录提交成功！',
						theme: '征信补录',
						enter: '知道了',
						cb: () => {
							// this.$emit('submit-success');
							this.$router.push({ path: '/order' })
						}
					});

				} else {
					this.$message.error(data.data.message);
				}
			}).catch((error) => {

			});
		},
	},
	mounted() {
		this.$store.commit('bank', this);
	}
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.creditAdd {
	font-size: 14px;
	color: #475669;
	margin-left: 200px; // .info-row {
	// 	.info-input {
	// 		width: 360px;
	// 	}
	// }
	.info {
		text-align: right;
		font-size: 12px;
		color: #666666;
		.text {
			color: #2A2A2A;
		}
	}

	.credit-imgs {
		padding: 0px 20px;
		text-align: left;
		font-size: 14px;
		color: #99A9BF;
		.credit-img-each {
			width: 150px;
			text-align: center;
		}
		.credit-img {
			width: 140px;
		}
	}

	.credit-button-assure {
		margin-left: 14px;
		margin-top: 20px;
	}
	.info-row .subTitle {
		text-align: left;
	}
	.submitInfoTitle {
		text-align: left;
	}
}

</style>
